<template>
  <el-card class="zhuzhuang">
    <div ref="zhuzhuang" style="height: 260px"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import { getData } from '@/api/index.js'
export default {
  mounted() {
    getData().then(({ data }) => {
      // console.log(data)
      const { userData } = data.data
      // console.log(userData.map(item => item.data))
      const echartszz = echarts.init(this.$refs.zhuzhuang)
      const echartszzOption = {
        legend: {
          textStyle: {
            color: '#333'
          }
        },
        grid: {
          left: '20%'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: userData.map(item => item.data),
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#333'
          }
        },
        yAxis: [
          {
            type: 'value',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#17b3a3'
              }
            }
          }
        ],
        color: ['#2ec7c9', '#b6a2de'],
        series: [
          {
            name: '新增用户',
            data: userData.map(item => item.new),
            type: 'bar'
          },
          {
            name: '活跃用户',
            data: userData.map(item => item.active),
            type: 'bar'
          }
        ]
      }
      echartszz.setOption(echartszzOption)
    })
  }
}
</script>

<style lang="less" scoped></style>
